<template>
    <div class="row">
        <div class="col-12">
            <div class="card" style="cursor: pointer">
                <div class="card-header">
                    <div class="row text-center">
                        <div class="col-1"><input type="checkbox" v-model="selected" @click="selectAll"></div>
                        <div class="col-5">
                            <span v-if="selectItems.length > 0" style="position: absolute;left: 0px">已选择{{ selectItems.length + '/' + (this.items ? this.items.length : 0) }}</span>
                            名称
                        </div>
                        <div class="col-2">作者</div>
                        <div class="col">修改时间</div>
                    </div>
                </div>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item" v-for="item in items" :key="item.id" @click="selectOne(item.id, $event)">
                        <div class="row d-flex align-items-center">
                            <div class="col-1 text-center"><input type="checkbox" :value="item.id" v-model="selectItems"></div>
                            <div class="col-5 border-left">
                                <a @click.prevent="$emit('view', item)">
                                    <span>
                                        <i v-if="item.content_type === 'd'" class="fa fa-folder-o mr-1" aria-hidden="true"></i>
                                        <i v-if="item.content_type === '-'" class="fa fa-book mr-1" aria-hidden="true"></i>
                                        {{item.name}}
                                    </span>
                                </a>
                            </div>
                            <div class="col-3 border-left">
                                <div>{{item.author}}</div>
                                <div class="small"><span class="d-none d-md-block">{{item.updated_at}}</span><span class="d-block d-md-none">{{item.updated_at.split(' ')[0]}}</span></div>
                            </div>
                            <div class="col-3 border-left"><span class="d-none d-lg-block">{{item.updated_at}}</span><span class="d-block d-lg-none">{{item.updated_at.split(' ')[0]}}</span></div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
            return {
                selected: false,
                selectItem: [],
            }
        },
    props: ['items', 'selectItems'],
    emits: ['loadItems', 'view', 'select'],
    methods: {
        loadItems(index) {
            this.$emit('loadItems', index)
        },
        selectAll(){
            let select = []
            if (!this.selected) {
                this.items.forEach(el => {
                    select.push(el.id)
                })
            }
            this.$emit('select', select)
        },
        selectOne(id, event) {
            if (event.target.tagName === "INPUT") {
                if (event.target.checked) {
                    this.$emit('select', [id])
                } else {
                    this.$emit('select', [])
                }
                return
            }
            this.$emit('select', [id])
        },
    },
    watch: {
        selectItem(newVal, oldVal) {
            // console.log(newVal, oldVal)
            if (newVal.length === this.items.length) {
                // this.selected = true
            } else {
                // this.selected = false
            }
            // this.$emit('select', newVal)
        },
        selectItems(newVal, oldVal) {
            if (newVal.length === this.items.length) {
                this.selected = true
            } else {
                this.selected = false
            }
            console.log('selectItems', newVal.length)
        }
    },
    computed: {
    }
}
</script>

<style>
.example {
  color: red;
}
</style>

<custom1>
  This could be e.g. documentation for the component.
</custom1>
